<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex基础3</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.container{
				/*声明使用flex布局*/
				height: 500px;
				background: yellow;
				display: flex;	
				/*flex布局的方向*/
				/*flex-direction: row;*/	
				/*flex布局是否换行
				 * 		flex-wrap:
				 * 			wrap  换行
				 * 			nowrap  不换行(默认)
				 * 			wrap-reverse  反向换行
				 * */
				/*flex-wrap: wrap;*/
				flex-flow: row wrap;
				/*
				 * flex-flow是flex-direction和flex-wrap的合写方式
				 * 		默认是flex-flow: row nowrap;
				 * */
				/*堆叠伸缩方式
				 * 	align-content
				 * 			flex-start  从起点开始;
				 * 			flex-end    从终点开始
				 * 			space-between  
				 * 			space-around
				 * 			center
				 * 			stretch
				 * */
				align-content: stretch;	
			}
			.item{
				width: 200px;			/*每个item占20%*/
				text-align: center;
				background: #129FEA;
				margin: 10px;
				/*height: 50px;
				line-height: 50px;*/
			}
			.container div:nth-of-type(3){
				/*height: 100px;*/
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item">item1</div>
			<div class="item">item2</div>
			<div class="item">item3</div>
			<div class="item">item4</div>
			<div class="item">item5</div>
			<div class="item">item5</div>
			<div class="item">item5</div>
			<div class="item">item5</div>
			<div class="item">item5</div>
			<div class="item">item5</div>
		</div>
	</body>
</html>
